<template>
  <el-dialog
    title="选择下载内容"
    :visible.sync="isshow"
    width="60%"
    @close="close()"
  >
    <div>
      <div class="selectTitle">课程基本信息</div>
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
      >全选
      </el-checkbox
      >
      <div style="margin: 15px 0"></div>
      <el-checkbox-group
        v-model="checkedpancels"
        @change="handleCheckedpancelsChange"
      >
        <el-checkbox
          v-for="city in pancels"
          :label="city.value"
          :key="city.value"
        >{{ city.label }}
        </el-checkbox
        >
      </el-checkbox-group>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close()">取 消</el-button>
      <el-button type="primary" @click="confirmExport()">导出</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  components: {},
  name: 'exportPancel',
  props: {
    pancels: Array
  },

  data() {
    return {
      isshow: false,
      checkAll: false,
      checkedpancels: [],
      isIndeterminate: true
    }
  },
  mounted() {
  },
  watch: {},
  methods: {
    close() {
      this.isshow = false
    },
    show() {
      this.isshow = true
      this.checkAll = true
      this.isIndeterminate = false
      this.checkedpancels = this.pancels.map((item) => {
        return item.value
      })
    },
    handleCheckAllChange(val) {
      this.checkedpancels = val
        ? this.pancels.map((item) => {
          return item.value
        })
        : []
      this.isIndeterminate = false
    },
    handleCheckedpancelsChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.pancels.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.pancels.length
    },

    confirmExport() {
      if (this.checkedpancels.length == 0) {
        this.$message.error('请选择导出字段')
        return
      }
      let str = this.checkedpancels.join(',')
      this.$emit('confirmExport', str)
      this.isshow = false
    }
  }
}
</script>
<style scoped lang="scss">
.selectTitle {
  font-size: 14px;
  font-weight: bold;
  margin: 10px 0;
  cursor: default;
}

.checkitem {
  margin: 10px 20px 10px 0;
}

.checkall {
  margin: 10px 0 10px 0;
}
</style>
